<template>
  <ele-page>
    <MenuSearch @search="reload" />
    <ele-card :body-style="{ paddingTop: '8px' }">
      <ele-pro-table
        ref="tableRef"
        sticky
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        :pagination="false"
        highlight-current-row
        :default-expand-all="false"
        cache-key="SystemMenuTable"
      >
        <template #toolbar>
          <el-button type="primary" class="ele-btn-icon" :icon="PlusOutlined" @click="openEdit()">
            新增
          </el-button>
          <el-button class="ele-btn-icon" :icon="ColumnHeightOutlined" @click="expandAll">
            展开全部
          </el-button>
          <el-button class="ele-btn-icon" :icon="VerticalAlignMiddleOutlined" @click="foldAll">
            折叠全部
          </el-button>
        </template>

        <template #title="{ row }">
          <el-icon
            v-if="row.icon"
            :size="15"
            style="margin-right: 8px; vertical-align: -2px"
          >
            <component :is="row.icon" />
          </el-icon>
          <span>{{ row.title }}</span>
        </template>

        <template #status="{ row }">
          <el-tag v-if="row.status === 1" type="success">正常</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>

        <template #hide="{ row }">
          <el-tag v-if="row.hide === 0" type="success">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>

        <template #type="{ row }">
          <el-tag v-if="isExternalLink(row.path)" size="small" type="danger" :disable-transitions="true">
            外链
          </el-tag>
          <el-tag v-else-if="isExternalLink(row.component)" size="small" type="warning" :disable-transitions="true">
            内链
          </el-tag>
          <el-tag v-else-if="isDirectory(row)" size="small" :disable-transitions="true">
            目录
          </el-tag>
          <el-tag v-else-if="row.type === 0" size="small" type="success" :disable-transitions="true">
            菜单
          </el-tag>
          <el-tag v-else-if="row.type === 1" size="small" type="info" :disable-transitions="true">
            按钮
          </el-tag>
        </template>

        <template #action="{ row }">
          <el-link type="primary" underline="never" @click="openEdit(null, row.id)">
            新增
          </el-link>
          <el-divider direction="vertical" />
          <el-link type="primary" underline="never" @click="openEdit(row)">
            编辑
          </el-link>
          <el-divider direction="vertical" />
          <el-link type="danger" underline="never" @click="remove(row)">
            删除
          </el-link>
        </template>
      </ele-pro-table>
    </ele-card>
    <MenuEdit v-model="showEdit" :adminType="adminType" :data="current" :menuList="menuList" :pid="pid" @done="reload" />
  </ele-page>
</template>

<script setup>
import { listMenu, removeMenu } from '@/api/system/menu'
import {
  ColumnHeightOutlined,
  PlusOutlined,
  VerticalAlignMiddleOutlined,
} from '@/components/icons'
import { isExternalLink, toTree } from 'ele-admin-plus/es'

import MenuEdit from './components/menu-edit.vue'
import MenuSearch from './components/menu-search.vue'

defineOptions({
  name: 'SystemMenu',
})

/** 表格实例 */
const tableRef = ref(null)

/** 表格列配置 */
const columns = ref([
  {
    type: 'index',
    columnKey: 'index',
    width: 50,
    align: 'center',
    fixed: 'left',
  },
  {
    prop: 'title',
    label: '菜单名称',
    slot: 'title',
    minWidth: 160,
  },
  {
    prop: 'path',
    label: '路由地址',
    minWidth: 160,
  },
  {
    prop: 'authority',
    label: '权限标识',
    minWidth: 110,
  },
  {
    prop: 'sort',
    label: '排序',
    align: 'center',
  },
  {
    slot: 'status',
    label: '状态',
    align: 'center',
    formatter: row => row.status === 1 ? '正常' : '禁用',
  },
  {
    slot: 'hide',
    label: '可见',
    align: 'center',
  },
  {
    prop: 'type',
    label: '类型',
    align: 'center',
    slot: 'type',
  },
  {
    columnKey: 'action',
    label: '操作',
    width: 180,
    align: 'right',
    slot: 'action',
  },
])

/** 当前编辑数据 */
const current = ref(null)

/** 是否显示编辑弹窗 */
const showEdit = ref(false)

/** 上级菜单id */
const pid = ref()

const menuList = ref([])

const Route = useRoute()

const adminType = Number(Route?.params?.adminType) || 0

/** 表格数据源 */
async function datasource({ where }) {
  const res = await listMenu({ ...where, type: adminType })
  menuList.value = toTree({
    data: res.data,
    idField: 'id',
    parentIdField: 'pid',
  })
  return menuList.value
}

/** 刷新表格 */
function reload(where) {
  tableRef.value?.reload?.({ where })
}

/** 打开编辑弹窗 */
function openEdit(row, id) {
  current.value = row ?? null
  pid.value = id
  showEdit.value = true
}

/** 删除单个 */
function remove(row) {
  if (row.children?.length) {
    utils.message('请先删除子节点', 'error')
    return
  }
  utils.confirm(`确定要删除“${row.title}”吗?`, '系统提示', {
    type: 'warning',
    draggable: true,
  })
    .then(() => {
      const loading = utils.message('请求中..', 'loading')
      removeMenu(row.id)
        .then((res) => {
          utils.message(res.msg, res.success)
          if (res.success)
            reload()
        })
        .finally(() => {
          loading.close()
        })
    })
    .catch(() => { })
}

/** 展开全部 */
function expandAll() {
  tableRef.value?.toggleRowExpansionAll(true)
}

/** 折叠全部 */
function foldAll() {
  tableRef.value?.toggleRowExpansionAll(false)
}

/** 判断是否是目录 */
function isDirectory(d) {
  return !!d.children?.length && !d.component
}
</script>
